(function ($) {

    //счетчик для сквозного ойди
    var counter = 0;

    //вьюха домашней псевдостраницы
    var SmartAppHomeView = Backbone.View.extend({
        el: '#pageArea',
        initialize: function(){
            this.render();
        },
        render: function(){
            var that = this;
            var template = _.template($('#home-interface-page').html());
            that.$el.html(template);
        }
    });

    var smartAppHomeView =  new SmartAppHomeView();

    //вьюха псевдостраницы авторизации
    var SmartAppLoginView = Backbone.View.extend({
        el: '#pageArea',
        initialize: function(){
            this.render();
        },
        render: function(){
            var that = this;
            var template = _.template($('#login-interface-page').html());
            that.$el.html(template);
        }
    });

    var smartAppLoginView =  new SmartAppLoginView();

    //вьюха псевдостраницы  конструктора умных страниц
    var SmartAppBuilderView = Backbone.View.extend({
        el: '#pageArea',
        events: {
            'click #add-txt-widget': 'addTxtWidget',
            'click #add-img-widget': 'addImgWidget'
        },
        initialize: function(){
            _.bindAll(this, 'render', 'addTxtWidget', 'addImgWidget');
            this.render();
        },
        render: function(){
            var that = this;
            var template = _.template($('#builder-interface-page').html());
            that.$el.html(template);
        },
        addTxtWidget: function() {
            counter++;
            //console.log(counter);
            var txtWidgetView = new TxtWidgetView();
        },
        addImgWidget: function() {
            counter++;
            //console.log(counter);
            var imgWidgetView = new ImgWidgetView();
        }
    });

    var smartAppBuilderView =  new SmartAppBuilderView();

    //модель виджета ТЕКСТ
    var TxtWidgetModel = Backbone.Model.extend({
        //здесь надо будет описать модель виджета
    });

    var txtWidgetModel = new TxtWidgetModel();

    //вьюха виджета ТЕКСТ
    var TxtWidgetView = Backbone.View.extend({
        el: '#builder-area',
        initialize: function(){
            this.render();
        },
        render: function(){
            // шаблон текстового виджета
            var defTxt = {defaultText: "<h4>!Add you custom text here!</h4>"};
            var templateTW = _.template($('#txt-widget-template').html(), defTxt);
            this.$el.append(templateTW);
            // интерактивность текстового виджета
            $('.txt-widget').each(function(counter){
                $(this).attr("id", "txt-widget-div" + counter +  "");
                //$(this).children('.text-widget-textarea-class').cleditor({ controls: "bold italic underline strikethrough | font style  color | bullets numbering | alignleft center alignright justify | link unlink" });
                $(this).children('.text-widget-textarea-class').attr("id", "txt-widget-textarea" + counter +  "");
                $(this).children('.button.danger').attr("id", "del-txt-widget" + counter +  "");
                $(this).draggable({ handle: ".drag" }, { containment: "#builder-area", scroll: false }, { grid: [ 25,25 ] });

                CKEDITOR.disableAutoInline = true;
                CKEDITOR.inline('txt-widget-textarea' + counter + '');
            });

        }
    });

    //модель виджета ИЗОБРАЖЕНИЕ
    var ImgWidgetModel = Backbone.Model.extend({
        //здесь надо будет описать модель виджета
    });
    var imgWidgetModel = new ImgWidgetModel();

    //вьюха виджета ИЗОБРАЖЕНИЕ
    var ImgWidgetView = Backbone.View.extend({
        el: '#builder-area',
        initialize: function(){
            this.render();
        },
        render: function(){
            var templateTI = _.template($('#img-widget-template').html(), {});
            this.$el.append(templateTI);
            $('.img-widget').each(function(counter){
                $(this).attr("id", "img-widget-div" + counter +  "");
                $(this).draggable({ handle: ".drag" }, { containment: "#builder-area", scroll: false }, { grid: [ 25,25 ] });
            });
        }
    });

    //навигация
    var NavigationRouter = Backbone.Router.extend({
        routes: {
            '': 'homePage',
            'home': 'homePage',
            'login': 'loginPage',
            'builder': 'builderPage'
        }
    });

    var navigationRouter = new NavigationRouter();
    navigationRouter.on('route:homePage', function(){
         smartAppHomeView.render();
    });
    navigationRouter.on('route:loginPage', function(){
        smartAppLoginView.render();
    });
    navigationRouter.on('route:builderPage', function(){
        smartAppBuilderView.render();
    });

    Backbone.history.start();


})(jQuery);